<template>
    <view class="page">
        <view class="page-top">
            <view class="page-top-head">
                <view class="head-left">
                    <img :src="expertDetail.photo_url" mode="aspectFill"/>
                </view>
                <view class="head-center">
                    <text class="name">{{expertDetail.realname}}</text>
                    <text class="tip">{{expertDetail.position}}</text>
                </view>
                <view class="head-right">
                    <img :src="File_Url+'allocation-white.png'" />
                    <text>{{(expertDetail.city||'').substr(0,2)}}</text>
                </view>
            </view>
            <view class="page-top-place">
                <img :src="File_Url+'company-white.png'" />
                <text>{{expertDetail.unit_name}}</text>
            </view>
        </view>
        <view class="page-center">
            <view class="page-center-title">擅长领域</view>
            <view class="page-center-content">
                <view class="content">
                    {{expertDetail.strengths}}
                </view>
                <view class="tip">
                    <text v-for="(item, index) in expertDetail.expert_label" :key="index">{{item}}</text>
                </view>
            </view>
        </view>
        <view class="page-bottom">
            <view class="page-bottom-title">官方点评</view>
            <view class="null" v-if="expertDetail.official_comment.length==0">
                <text>暂无官方点评</text>
            </view>
            <view class="page-bottom-content" v-if="expertDetail.official_comment.length>0" v-for="(item,index) in expertDetail.official_comment" :key="index">
                <view class="bottom-content-head">
                    <img :src="item.photo_url"/>
                    <text>{{item.nickname}}</text>
                </view>
                <view class="bottom-content-content">
                    {{item.content}}
                </view>
                <view class="bottom-content-bottom">
                    <view class="bottom-time">{{item.updated_at}}</view>
                    <view class="bottom-right">
                        <view class="item" @click="commentLikeAction(item.id)">
                            <img :src="File_Url+'comment-support-active.png'" v-if="item.is_like == 1" />
                            <img :src="File_Url+'comment-support.png'" v-else />
                            <text>{{item.comment_like_num}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-btn">
            <button @click="toSkipOrder" v-if="expertDetail.is_appointed==0">预约专家</button>
            <button @click="tips" class="grey" v-else>预约专家</button>
        </view>
    </view>
</template>

<script>
    export default {
        name: "expertDetail",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                expertId: '',
                expertDetail: {}
            }
        },
        onLoad(query){
            this.expertId = query.expertId;
            this.getExpertDetail();
        },
        methods:{
            //获取专家详情
            async getExpertDetail(){
                const res = await this.$api.getExpertDetail({id:this.expertId,user_token: uni.getStorageSync('userToken')});
                if (res.data.level == 'success'){
                    this.expertDetail = res.data.data
                }
            },
            //官方点评点赞
            async commentLikeAction(id){
                let params = {
                    comment_id: id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.commentLikeAction(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getExpertDetail();
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getExpertDetail();
                }
            },
            toSkipOrder(){
                uni.navigateTo({
                    url: '/pages/expertLibrary/orderExpert/orderExpert?expertId='+this.expertId
                })
            },
            tips(){
                uni.showToast({
                    icon: 'none',
                    title: '您已预约了该专家，请耐心等待管理员处理！',
                    duration: 3000
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        min-height: calc(100vh - 160rpx);
        background: #F8F8F8;
        padding-bottom: 160rpx;
    }
    .page-top{
        width: calc(100vw - 80rpx);
        background-image: url("http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/peoplesAssociation/expertdetail-bg.png");
        height: 241rpx;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 60rpx 40rpx;
        .page-top-head{
            @include flex(flex-start);
            flex-direction: row;
            color: #FFFFFF;
            .head-left{
                width: 130rpx;
                height: 130rpx;
                border-radius: 360rpx;
                overflow: hidden;
            }
            .head-center{
                padding: 0 20rpx;
                @include flex(flex-start,flex-start);
                flex-direction: column;
                .name{
                    height: 52rpx;
                    line-height: 52rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .tip{
                    height: 42rpx;
                    line-height: 42rpx;
                    font-size: 28rpx;
                }
            }
            .head-right{
                margin-left: auto;
                @include flex(flex-start);
                flex-direction: row;
                img{
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 14rpx;
                }
                text{
                    font-size: 24rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                }
            }
        }
        .page-top-place{
            color: #FFFFFF;
            @include flex(flex-start);
            flex-direction: row;
            padding-top: 43rpx;
            img{
                width: 50rpx;
                height: 50rpx;
                margin: 0 17rpx 0 13rpx;
            }
            text{
                height: 50rpx;
                line-height: 50rpx;
                font-size: 28rpx;
            }
        }
    }
    .page-center{
        padding: 30rpx 30rpx 40rpx 30rpx;
        .page-center-title{
            height: 42rpx;
            line-height: 42rpx;
            padding-bottom: 20rpx;
            font-size: 30rpx;
            font-weight: bold;
        }
        .page-center-content{
            background: #FFFFFF;
            border-radius: 16rpx;
            padding: 40rpx 36rpx;
            .content{
                font-size: 30rpx;
                line-height: 42rpx;
            }
            .tip{
                @include flexWrap(flex-start);
                flex-direction: row;
                padding-top: 40rpx;
                text{
                    height: 44rpx;
                    line-height: 44rpx;
                    padding: 0 20rpx;
                    border-radius: 8rpx;
                    background: #3782FF;
                    margin-right: 20rpx;
                    color: #FFFFFF;
                    margin-top: 5rpx;
                    font-size: 25rpx;
                }
            }
        }
    }
    .page-bottom{
        background: #FFFFFF;
        .page-bottom-title{
            height: 88rpx;
            line-height: 88rpx;
            padding: 0 30rpx;
            font-size: 34rpx;
            font-weight: bold;
            border-bottom: 2rpx solid #F1F1F1;
        }
        .page-bottom-null{
            padding: 60rpx 30rpx;
            text-align: center;
        }
        .page-bottom-content{
            padding: 20rpx;
            .bottom-content-head{
                @include flex(flex-start);
                flex-direction: row;
                img{
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 360rpx;
                }
                text{
                    height: 50rpx;
                    line-height: 50rpx;
                    font-weight: bold;
                    font-size: 24rpx;
                    padding: 0 10rpx;
                }
            }
            .bottom-content-content{
                padding: 0 10rpx;
                margin: 20rpx 0;
                height: 66rpx;
                line-height: 33rpx;
                font-size: 24rpx;
                @include ellipsis(2);
            }
            .bottom-content-bottom{
                @include flex(flex-start);
                flex-direction: row;
                padding: 0 10rpx;
                .bottom-time{
                    height: 33rpx;
                    line-height: 33rpx;
                    color: #9B9B9B;
                    font-size: 24rpx;
                }
                .bottom-right{
                    margin-left: auto;
                    @include flex(flex-start);
                    flex-direction: row;
                    .item{
                        @include flex(flex-start);
                        flex-direction: row;
                        margin-left: 20rpx;
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                        text{
                            height: 40rpx;
                            line-height: 40rpx;
                            color: #9B9B9B;
                        }
                    }
                }
            }
        }
    }
    .bottom-btn{
        position: fixed;
        bottom: 0;
        left: 0;
        width: calc(100vw - 60rpx);
        padding: 30rpx;
        background: #ffffff;
        button{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            color: #FFFFFF;
            font-size: 34rpx;
            background: #3782FF;
            border-radius: 44rpx;
        }
        .grey{
            background: #aaa;
        }
    }
</style>